<template>
  <div class="box">
    <el-scrollbar>
      <div class="box-content">
        <div class="title"><span>2</span>. {{ plugin.lang('config.two.title') }}</div>
        <div class="body">{{ plugin.lang('config.two.body') }}</div>
        <el-table v-loading="signerLoading" :data="data" style="width: 100%;">
          <el-table-column :label="plugin.lang('signer.id')" prop="id" />
          <el-table-column  width="100" align="right" header-align="right" :label="plugin.lang('signer.status')" prop="status">
            <template #default="scope">
              <el-tag :type="scope.row.state == 'DISABLED' ? 'warning' : 'success'">
                {{ plugin.lang('signer.status_text.' + scope.row.state) }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-button type="primary" size="large" :loading="loading" @click="onAdd" style="width:100%">{{ plugin.lang('signer.add') }}</el-button>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { ref } from 'vue';
import app from '@/app'
import model from '../../model'

export default {
  setup() {
    const data = model.signer
    const signerLoading = model.signerLoading

    // 更新
    const loading = ref(false)
    const onAdd = () => {
      loading.value = true
      model.addSigner().finally(() => {
        loading.value = false
      })
    }

    return {
      plugin: app.plugin.index,
      data,
      loading,
      signerLoading,
      onAdd
    }
  }
}
</script>